<template>
	<view class="send-track-wrap">
		<map id="historyMap" class="map"   style="width: 100%;height: 100%;" :scale="17"
				:markers="markers" :latitude="latitude" :longitude="longitude" :polyline="polyline" @markertap="onMarkerClick">
		</map>
		<view class="sele-site sele-con c-flex jc-center c-item-center"  @click="onSeleCar">
			{{seleCar?seleCar.licensePlate:'选择车牌号'}}<view class="arrow"></view>
		</view>
		<view class="select sele-con c-flex c-item-center jc-center"    >
			<view class="select_data c-flex  c-item-center" style="position: relative;">
				<uni-datetime-picker class="date-picker" v-model="queryDate" type="datetimerange" :border="false" rangeSeparator="~"
					:clearIcon="false" start="2001-3-20" end="2038-6-20" placeholder="选择时间" @change="onSeleDatehandlder" 
					>
					<view class="">
						{{queryDate?formatTimeStr(queryDate[0])+'~'+formatTimeStr(queryDate[1]):'选择时间'}}
					</view>
				</uni-datetime-picker>	
				<view class="arrow"></view>
			</view>
		
		</view>
		<view class="details" v-if="carInfo">
			<car-details :dataObj="carInfo" :pType="2" @onRefresh="onRefresh"></car-details>
		</view>
		
		<uni-popup ref="type_popup" type="bottom" :custom="true" :mask-click="true"
							 background-color="rgba(0,0,0,0)" style="border-top-left-radius: 50rpx;" :safe-area="false">
			<view class="pop-content">
				<view class="header c-flex jc-between">
					<view @tap='sure(0)'>取消</view>
					<view @tap='sure(1)'>确定</view>
				</view>
				<view class="search-con c-flex jc-start c-item-center">
					<view class="input-con c-flex jc-start c-item-center">
						<image src="@/static/images/notice/find-icon.png" style="width: 42rpx;max-height: 42rpx;"></image>
						<input class="uni-input" v-model="searchInfo" name="text" confirm-type="search" 
										placeholder="请输入车牌号..." @confirm="onInputChange" @input="onInputChange"/>
					</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="popValue" @change="onDataChange"
					class="tower_type">
					<picker-view-column >
						<view class="item c-flex c-item-center jc-center" v-for="(item,index) in popList"
							:key="index">{{item.licensePlate}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>	
	</view>
</template>

<script>
	import CarDetails from './car-details.vue';
	import {formatDateStr,formatTime} from '@/utils/utils.js';
	export default{
		components:{CarDetails},
		data(){
			return {
				remoteImgUrl: this.$API.IMG_URL + '/construct-supervision-mp/energy/',
				indicatorStyle: `height: 50px;line-height:50px;`,
				map:{},
				markers:[],
				popList:[],
				carList:[],
				polyline:[],
				linePoints:[],
				latitude:'35.602195',
				longitude:'118.89116',
				carInfo:null,
				searchInfo:'',
				popValue:'',
				popIndex:0,
				currMarkerItem:'',
				seleCar:'',
				queryDate:'',
			}
		},
		onReady() {
			 this.map = uni.createMapContext('historyMap',this);
		},
		onLoad(options) {
			this.seleCar = JSON.parse(options.data);
			this.findCarList();
		},
		methods:{
			//初始化轨迹
			initTrack(car){
				uni.showLoading();
				const date = new Date();
				date.setHours(0);
				let startTime = '';
				let endTime = '';
				if(this.queryDate && this.queryDate.length>0){
					startTime = this.queryDate[0];
					endTime = this.queryDate[1];
				}else{
					startTime = formatDateStr(date);
					endTime = formatDateStr(new Date());
					this.queryDate = [startTime,endTime];
				}
				this.$API.findSendTrack({vehicleId:car.id,startTime:startTime,
																endTime:endTime}).then(res=>{
					const arr = res.list;
					arr.forEach(point =>{
						let arr = [];
							arr.push({latitude: Number(point.latitude),longitude: Number(point.longitude)});
					});
					this.polyline = [];
					this.polyline.push({
							points: arr,
							color: '#6A63FF',
							color_copy: '#6A63FF',
							width: 4,
							arrowLine: true,
					});
				});	
			},
			findCarList(tid){
				this.$API.findCars({licensePlate:'',name:'',tenantId:tid}).then(res=>{
					this.clearCarMarker();
					this.carList = res.list;
					this.popList = [...res.list];
					if(this.carList.length>0){
						this.initCarMarker(this.seleCar);
						this.initTrack(this.seleCar);
					}
				});	
			},
			//查询车辆信息
			findCarInfo(id){
				this.$API.findCarInfo(id).then(res=>{
					this.carInfo = res.data;
					this.carInfo['id'] = id;
					if(this.currMarkerItem){
						this.currMarkerItem.longitude = Number(this.carInfo.longitude);
						this.currMarkerItem.latitude = Number(this.carInfo.latitude);
						this.longitude = this.currMarkerItem.longitude;
						this.latitude = this.currMarkerItem.latitude;
					}
				});
			},
			//清除车辆相关marker
			clearCarMarker(){
				this.carList.forEach(carItem =>{
					for(let i = 0;i<this.markers.length;i++){
						const markerItem = this.markers[i];
						if(carItem.id == markerItem.id){
							this.markers.splice(i,1);
							break;
						}
					}
				});
			},
			initCarMarker(item){
				this.markers = [];
				if(item.longitude && item.latitude){
					item['gps'] = item.longitude+','+item.latitude;
					this.longitude = item.longitude;
					this.latitude = item.latitude;
					let icon = item.vehicleType == "2" ?'send-track-car.png':'send-track-car3.png';//
					const marker = this.addMarker(item,`${this.remoteImgUrl}${icon}`,item.vehicleType);
					this.markers.push(marker)
				}
			},
			//创建地图标志物
			addMarker(item,icon,type){
				const gps = item.gps.split(',');
				const marker = {
					id:item.id,
					latitude: gps[1],
					longitude: gps[0],
					width:55,
					height:40,
					iconPath: icon,
					sourcePath:icon,
					type:type,
					callout:{content:type == '0'?item.name:item.licensePlate,color:'#333333',x:10,display:'ALWAYS',padding:8,borderWidth:1,
									textAlign:'center',borderColor:type == '0'?'#C96BFF':'#c59217',borderRadius:6,x:45,y:45}
				};
				return marker
			},
			onMarkerClick(e){
				console.log('onMarkerClick',e)
				const arr = this.markers.filter(item => {return item.id == e.markerId});
				if(arr && arr.length > 0){
					this.setMapCenter(arr[0])
				}
			},
			setMapCenter(item){
				if(this.currMarkerItem)	this.currMarkerItem.iconPath = this.currMarkerItem.sourcePath;
				this.currMarkerItem = item;
				if(this.currMarkerItem.type == '0'){
					this.currMarkerItem.iconPath = this.remoteImgUrl+'send-track-site-sele.png';
				}
				if(this.currMarkerItem.type == '1'){
					this.currMarkerItem.iconPath = this.remoteImgUrl+'send-track-car4.png';
				}
				if(this.currMarkerItem.type == '2'){
					this.currMarkerItem.iconPath = this.remoteImgUrl+'send-track-car-2.png';
				}
				this.longitude = this.currMarkerItem.longitude;
				this.latitude = this.currMarkerItem.latitude;
				if(this.currMarkerItem.type == '1'||this.currMarkerItem.type == '2'){
					this.findCarInfo(this.currMarkerItem.id);
					// this.initTrack(this.currMarkerItem.id);
				}
			},
			
			onSeleDatehandlder(e) {
				console.log(e)
				this.queryDate = e;
				this.initTrack(this.seleCar)
			},
			formatTimeStr(time){
				return formatTime(time,'yyyy-MM-dd HH:mm');
			},
			//搜索站点查询
			onInputChange(){
				const arr = this.carList.filter(item=>{return item.licensePlate.indexOf(this.searchInfo) != -1});
				this.popList = arr;
			},
			//选择站点
			onSeleCar(e){
				this.$refs.type_popup.open();
			},
			/**
			 * 选择任务
			 * @param {Object} e
			 */
			onDataChange(e){
				this.popIndex = e.detail.value[0];
			},
			//刷新轨迹
			onRefresh(){
				this.findCarInfo(this.seleCar.id);
				this.initTrack(this.seleCar);
			},
			/**
			 * 确定选择的任务
			 * @param {Object} type
			 */
			sure(type){
				if(type==1){
						this.seleCar = this.popList[this.popIndex];
						this.initCarMarker(this.seleCar);
						this.initTrack(this.seleCar);
						this.polyline = [];
						this.carInfo = null;
				}
				this.$refs.type_popup.close();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.send-track-wrap{
		width:100%;height:100vh;
		
		.sele-con{height:80rpx;line-height:80rpx;text-align:center;background: #FFFFFF;border-radius: 20px;font-family: PingFangSC, PingFang SC;font-weight: 400;font-size: 13px;color: #5C666E;}
		.sele-site{position:absolute;left:12rpx;top:30rpx;width:186rpx;}
		.select {
			position: absolute; right: 12rpx; top: 30rpx;width:520rpx;
			text {font-size: 26rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #9C9C9C;}
			.select_data {
				
			}
		}
		.arrow{
			width: 0;height: 0;border-top: 5px solid #8c8989; border-right: 4px solid transparent;border-left: 4px solid transparent;margin-left: 10rpx;
		}
		.details{
			position:absolute;left:20rpx;bottom:52rpx;background: #ffffff;width: 88%;border-radius: 15rpx;    padding: 22rpx 26rpx;
			image{width:80rpx;height:80rpx;}
		}
		.search-con{
			border-radius: 40rpx;overflow:hidden;margin: 0 40rpx;
			.input-con{
				position: relative;width: 100%;
				height: 80rpx;line-height: 80rpx;padding-left: 18rpx;background: #f5f5f5;border-radius: 16rpx;font-size: 24rpx;
				.line{
					height: 40rpx;border: 2rpx solid #DEDEDE;position: absolute;right: 115rpx;
				}
				text{
					font-size: 28rpx;font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;color: #3E3E3E;line-height: 40rpx;position: absolute;right: 38rpx;
				}
			}
			
		}
		
		
		.picker-view {width: 750rpx;height: 500rpx;margin-top: 20rpx;}
		.pop-content{
			background: #fff;border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;border: 1rpx solid #fff;position: relative;
			.header{
				font-size: 28rpx;font-weight: 500;padding: 30rpx;
				view:first-child{color:#666666;}
				view:last-child{color: #2986FF;}
			}
			
			.item {height: 50px;align-items: center;justify-content: center;text-align: center;}
		}
		
		/*修改提示文字的颜色*/
		input::-webkit-input-placeholder {color: #8B959F;}
		input:-moz-placeholder {color: #8B959F;}
		input::-moz-placeholder { color: #8B959F;}
		input:-ms-input-placeholder { color: #8B959F;}
	}
</style>

<style>
	uni-icons {
		display: none !important;
	}
	.uniui-calendar {
		display: none !important;
	}
	.uni-icons {
		display: none !important;
	}
	.uni-date__x-input {
		height: 50rpx !important;
		line-height: 50rpx !important;
	}
	.uni-date-x,
	.uni-date__x-input {
		background-color: transparent !important;
		/* padding-right: 51rpx !important; */
		color: #000 !important;
		text-align: center;
		font-size: 26rpx !important;
		padding: 0 0 !important;
	}
</style>